<script lang="ts" setup>
import * as application from '@/api/application'
import type { ApplicationTableView } from '@/api/application/types'
import * as realm from '@/api/realm'
import FormDialog from './components/form-dialog.vue'

const realmOptions = ref<SelectOption[]>([])

onMounted(async () => {
    realmOptions.value = await realm.options()
})

const tableLoading = ref(false)
const queryRequest = reactive<PaginationRequest>({
    pageIndex: 1,
    pageSize: 10,
    criteria: {
        realmId: ''
    },
    order: {
        property: 'id',
        direction: 'DESC'
    }
})
const queryResponse = ref<PaginationResponse<ApplicationTableView>>({
    total: 0
})

const formDialogRef = ref()

const query = async (pageIndex?: number) => {
    tableLoading.value = true
    if(pageIndex) {
        queryRequest.pageIndex = pageIndex
    }

    queryResponse.value = await application.query(queryRequest)
    tableLoading.value = false
}

onMounted(() => {
    query()
})

watch(() => queryRequest.pageIndex, (pageIndex) => {
    query(pageIndex)
})

watch(() => queryRequest.pageSize, (pageSize) => {
    queryRequest.pageSize = pageSize
    query(1)
})

const openDialog = (id?: string) => {
    if(id === undefined) {
        formDialogRef.value.open({
            title: '添加应用'
        })
    } else {
        formDialogRef.value.open({
            title: '编辑应用',
            id
        })
    }
}
</script>

<template>
    <el-card shadow="never">
        <el-form :inline="true" class="criteria-form" label-width="auto">
            <el-form-item label="应用域">
                <el-select v-model="queryRequest.criteria.realmId" clearable>
                    <el-option v-for="option in realmOptions" :key="option.value" :label="option.text" :value="option.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query(1)">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card shadow="never">
        <div class="btn-panel">
            <el-button type="primary" @click="openDialog()">添加</el-button>
        </div>
        <div>
            <el-table v-loading="tableLoading" :data="queryResponse?.data">
                <el-table-column prop="name" label="应用名称" align="center"></el-table-column>
                <el-table-column prop="code" label="应用编码" align="center"></el-table-column>
                <el-table-column prop="realm" label="应用域" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="primary" link @click="openDialog(scope.row.id)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination v-if="queryResponse.total > 0" :total="queryResponse.total" layout="total, sizes, prev, pager, next, jumper"
                v-model:current-page="queryRequest.pageIndex" v-model:page-size="queryRequest.pageSize"></el-pagination>
        </div>
    </el-card>

    <FormDialog ref="formDialogRef" @close="query(1)"></FormDialog>
</template>

<style lang="scss" scoped>
.el-form-item {
    width: 20%
}
.btn-panel{
    text-align: left;
}
.criteria-form{
    display: flex;
    justify-content: flex-start;
}
.pagination-container {
    display: flex;
    margin-top: 15px;

    .el-pagination {
        margin-left: auto;
    }
}
</style>